<template>
	<view class="liveDetails">
		<view class="header">
			<view class="status_title">
				<image class="status_left" src="/static/img/arr-left.png" mode="widthFix" @click="back"></image>
				<view class="status_center">{{ liveinfo.name }}</view>
				<!-- <text><image src="/static/img/zhuanfa.png" mode="" style="width: 24px; height: 24px"></image></text> -->
				<text></text>
			</view>
		</view>
		<view class="live-content">
			<video
				id="myVideo"
				:src="`https://www.aikoolearn.com/video-dev${liveinfo.video}`"
				@error="videoErrorCallback"
				:danmu-list="danmuList"
				enable-danmu
				danmu-btn
				controls
				:enable-progress-gesture="true"
				:title="liveinfo.name"
				
				style="width: 100%; height: 325px"
			></video>

			<view class="live-title">
				{{ liveinfo.name }}
			</view>
			<view class="inline-people">在线{{ liveinfo.applyNum }}人</view>

			<view class="live">
				<p class="live-title">课程简介</p>
				<view class="">
					{{liveinfo.courseDescription}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			liveinfo: {},
			danmuList: [
				{
					text: '老师讲的很好',
					color: '#00000',
					time: 4
				},
				{
					text: '学到了',
					color: '#00000',
					time: 5
				}
			]
		};
	},
	onLoad(option) {
		if (option.classInfo) {
			this.liveinfo = JSON.parse(option.classInfo);
		}
	},
	methods: {
		back() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
.liveDetails {
	background-color: #f2f3f7;
	height: 100vh;
	.header {
		.status_bar {
			/* height: var(--status-bar-height); */
			width: 100%;
		}
		/* 自定义导航栏 */
		.status_title {
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 100.061rpx;
			padding: 0 16px;
			background-color: #ffffff;
		}
		.status_left {
			width: 24px !important;
		}
		.status_center {
			font-size: 17px;
			font-weight: 700;
			max-width: 400px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.status_right {
			width: 22px;
		}
		.save {
			color: #0fb09b;
			font-size: 20rpx;
		}
	}

	.live-title {
		padding: 12px 16px;
		font-size: 20px;
		font-weight: 600;
		background-color: #fff;
	}
	.inline-people {
		padding: 12px 16px;
		color: #999999;
		background-color: #fff;
	}
	.live {
		margin-top: 8px;
		>:nth-child(2){
			padding: 12px 16px;
			background-color: #fff;
		}
	}
}
</style>
